<template>
  <transition name="el-zoom-in-top" @after-leave="doDestroy">
    <ul
      class="el-dropdown-menu el-popper el-dropdown-menu--mini funnel-dropdown"
      v-clickoutside="hide"
      v-show="showPopper"
      :style="dropdownPosition"
    >
      <li @click="deepAnalyse">深入分析<i class="el-icon-caret-right"></i></li>
    </ul>
  </transition>
</template>
<script>
import Popper from 'element-ui/src/utils/vue-popper'
import Clickoutside from 'element-ui/src/utils/clickoutside'

export default {
  mixins: [Popper],

  directives: { Clickoutside },

  data() {
    return {
      showPopper: false,
      tagId: '',
      dropdownPosition: {
        top: 0,
        left: 0
      }
    }
  },

  methods: {
    showDropdown(params) {
      console.log(params)
      this.showPopper = true
      this.tagId = params.data.tagId
      this.dropdownPosition = {
        top: params.event.event.clientY + 'px',
        left: params.event.event.clientX + 'px'
      }
    },
    hide() {
      this.showPopper = false
      this.tagId = ''
    },
    deepAnalyse() {
      console.log(this.tagId)
      this.hide()
    }
  }
}
</script>

<style lang="scss">
.funnel-dropdown {
  z-index: 9999;
  position: fixed;
  li {
    padding: 10px 20px;
    cursor: pointer;
    &:hover {
      font-weight: bold;
      color: $theme-color;
    }
  }
}
</style>
